; (function () {
  var vm = new Vue({
    data: {
      todos: JSON.parse(localStorage.getItem('todos') || '[]'),
      currentTodo: null,
      filterText: 'all'
    },
    created() {
      this.hashChange()
      window.onhashchange = this.hashChange
    },
    computed: {
      index() {
        return this.todos.filter(item => !item.completed).length
      },
      toggleAll: {
        get() {
          return this.todos.every(item => item.completed)
        },
        set() {
          console.log(this.toggleAll);

          var checked = !this.toggleAll
          this.todos.forEach(item => {
            item.completed = checked
          })
        }
      },
      filterTodos() {
        switch (this.filterText) {
          case 'active':
            return this.todos.filter(item => !item.completed)
            break;
          case 'completed':
            return this.todos.filter(item => item.completed)
            break;
          default:
            return this.todos
            break;
        }
      }
    },
    methods: {
      //键盘enter添加任务
      handleDown(e) {
        var title = e.target.value.trim();
        var id = this.todos.length ? this.todos[this.todos.length - 1].id + 1 : 1;
        if (!title.length) return e.target.value = ''
        this.todos.unshift({
          id,
          title,
          completed: false
        })
        e.target.value = ''
      },

      //全选与全不选
      // handleToggleAll(e) {
      //   var checked = e.target.checked
      //   this.todos.forEach(item => {
      //     item.completed = checked
      //   })
      // },

      //删除单个任务
      handleDel(id) {
        this.todos.forEach((item, i) => {
          if (item.id == id) {
            this.todos.splice(i, 1)
            return true
          }
        })
      },

      //双击修改任务样式
      handleEdit(todo) {
        this.currentTodo = todo
      },

      //修改编辑
      handleSaveEdit(item, e) {
        var val = e.target.value.trim();
        if (!val.length) {
          this.handleDel(item.id);
          return
        } else {
          item.title = val;
          this.currentTodo = null
        }
      },

      //取消编辑
      handleEsc() {
        this.currentTodo = null
      },

      //清除完成任务的列表项
      clearAll() {
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].completed) {
            this.todos.splice(i, 1);
            i--
          }
        }
      },

      //hash改变
      hashChange() {
        this.filterText = window.location.hash.substr(2)
      }
    },
    watch: {
      todos: {
        deep: true,
        handler(val) {
          localStorage.setItem('todos', JSON.stringify(val))
          console.log(val);

        }
      },
      $route() {
        console.log(1);

      }
    },
    //获取焦点指令
    directives: {
      focus: {
        inserted: function (el) {
          el.focus();
        }
      },
      todoFocus: {
        update(el, binding) {
          if (binding.value) {
            el.focus()
          }
        }
      }
    }
  }).$mount('#app')
})()